<template>
	<view class="pages">
		<h-nav-bar :fixed="true" title="生长记录" backgroundColor="#fff"></h-nav-bar>
		<up-sticky>
			<view class="header">
				<view class="sec_head" :style="{ top: statusHeight + 80 + 'rpx' }"><!-- @touchstart="touchStart" @touchend="touchEndWeek" @touchmove="handleMove"-->
					<view class="sec_head_box" :style="{ transform: 'translate(' + calenderMove.x + 'px' }">
						<view class="sec_head_l" v-for="(item, index) in weekListHou" :key="index" style="color: #333">{{ item.title }} <view class="sec_head_l_dian" v-show="item.has"></view></view>
						<view class="sec_head_l" v-for="(item, index) in weekList" :key="index" style="color: #333" @click="checkWeek(item, index)">{{ item.title }} <view class="sec_head_l_dian" v-show="item.has"></view></view>
						<view class="sec_head_l" v-for="(item, index) in weekListQian" :key="index" style="color: #333">{{ item.title }} <view class="sec_head_l_dian" v-show="item.has"></view></view>
					</view>
					<view class="sec_head_box" :style="{ transform: 'translate(' + calenderMove.x + 'px' }">
						<view class="sec_head_l" v-for="(item, index) in weekListQian" :key="index" style="color: #333">{{ getDay(item.value) }}</view>
						<view class="sec_head_l" v-for="(item, index) in weekList" :key="index" :style="[{ color: dateTime == item.value ? '#fff' : '#333' },{ background:((dateTime == item.value&&dateTime == newTime) ? '#6EDABB' :((dateTime == item.value&&dateTime != newTime)?'#FDBA55':''))}]" @click="checkWeek(item, index)">{{ newTime == item.value?'今日':getDay(item.value) }}</view>
						<view class="sec_head_l" v-for="(item, index) in weekListHou" :key="index" style="color: #333">{{ getDay(item.value) }}</view>
					</view>
				</view>
				<view class="head_time" @click="openRl"><image class="head_time_img" src="@/static/images/rl.png"></image>{{ dateTime == newTime ? '今天' : dateTime == preTime ? '昨天' : dateTime == nextTime ? '明天' : editTime(dateTime) }} 宝宝{{babyMonth}}</view>
			</view>
		</up-sticky>
		<view class="section">
			<view class="sec_box" v-show="historyList?.length>0">
				<view class="sec_list flex" v-for="(item,index) in historyList" :key="index" :id="index" @touchstart="touchStart" @touchend="touchEndTab">
					<view class="sec_list_l">{{getTime(item.add_time)}}</view>
					<view class="sec_list_r" :style="{background:(item.grow_type==1?'linear-gradient( 330deg, #64DCCB 0%, #6ACCB7 100%)':(item.grow_type==2?'linear-gradient( 330deg, #71EB87 0%, #48DB68 100%)':'linear-gradient( 330deg, #D493F9 0%, #B36FF6 100%)'))}">
						<view class="sec_list_r_l">{{getName(item.grow_type)}}</view>
						<view class="sec_list_r_r">{{item.num}}{{getUnit(item.grow_type)}}
							<view v-show="item.del" @click="toDel(item,index)">移除</view>
						</view>
					</view>
				</view>
				<!-- <h-line :height="bottoms"></h-line> -->
			</view>
			<view class="sec_none" v-show="historyList?.length==0">
				<view>
					<image class="sec_none_img" src="@/static/images/nones.png"></image>
					<view class="sec_none_text">暂无数据记录</view>
				</view>
			</view>
		</view>
	</view>
		<view class="date_box" v-if="timeShow" :style="{ top: statusHeight + 80 + 'rpx' }" @click="timeShow = false">
			<view class="date_box_con" @click.stop="">
				<h-uni-calendar-new :date="dateTime" :birthday="birthDay" :selected="hasList" :show-month="false" :startDate="startDate" :endDate="endDate" @change="changeDay" @backToday="backToday" @monthSwitch="changeMonth" />
			</view>
		</view>
</template>

<script setup lang="ts">
	import { ref, reactive, nextTick } from 'vue'
	import { formatDate } from '@/utils/utils'
	import { navigateTo, showToast, navigateBack, redirectTo } from '@/utils'
	import dayjs from 'dayjs'
	import {
		onLoad,
		onPullDownRefresh,
		onReachBottom,
		onReady,
		onShow,
		onPageScroll,
		onUnload,
		onHide,
		onBackPress,
	} from '@dcloudio/uni-app'
	import { getBabyGrowthRecordsByDate, getMonthlyRecordStatus  } from '@/api/patients/index.js'
	import { useMemberStore } from '@/stores'
	let childrenId=""
	const login = ref(null) // 登录组件实例
	const store = useMemberStore()
	var token = store?.token
	const statusHeight = ref(0)
	const bottoms = ref(0)
	const loading = ref(false)
	const timeShow = ref(false)
	const babyMonth=ref(4)
	const babyDay=ref(4)
	const calenderMove = ref({
		x: 0,
		y: 0,
	})
	const weekList = ref([{
			title: '日',value: '',has:false
	},{
			title: '一',value: '',has:false
		},{
			title: '二',value: '',has:false
		},{
			title: '三',value: '',has:false
		},{
			title: '四',value: '',has:false
		},{
			title: '五',value: '',has:false
		},{
			title: '六',value: '',has:false
		}])
	const weekListHou = ref([{
			title: '日',value: '',has:false
	},{
			title: '一',value: '',has:false
		},{
			title: '二',value: '',has:false
		},{
			title: '三',value: '',has:false
		},{
			title: '四',value: '',has:false
		},{
			title: '五',value: '',has:false
		},{
			title: '六',value: '',has:false
		}])
	const weekListQian = ref([{
			title: '日',value: '',has:false
	},{
			title: '一',value: '',has:false
		},{
			title: '二',value: '',has:false
		},{
			title: '三',value: '',has:false
		},{
			title: '四',value: '',has:false
		},{
			title: '五',value: '',has:false
		},{
			title: '六',value: '',has:false
		}])
	const dateTime = ref(formatDate(new Date(), 'YYYY-MM-DD'))
	const weekTime = ref(formatDate(new Date(), 'YYYY-MM-DD'))
	const newTime = ref(formatDate(new Date(), 'YYYY-MM-DD'))
	const preTime = ref('')
	const nextTime = ref('')
	const birthDay=ref('2024-08-20')
	const historyList=ref([])
	function getName(type) {
		if(type==1){
			return '身高';
		}else if(type==2){
			return '体重';
		}else{
			return '头围';
		}
	}
	function getUnit(type) {
		if(type==1){
			return 'cm';
		}else if(type==2){
			return 'kg';
		}else{
			return 'cm';
		}
	}
	function getTime(time) {
		return formatDate(new Date(time), 'HH:mm')
	}
	function getUp() {
		var tt = new Date()
		var ti = tt.getTime() + 1000 * 60 * 60 * 24 * 1
		nextTime.value = formatDate(ti, 'YYYY-MM-DD')
		var tc = tt.getTime() - 1000 * 60 * 60 * 24 * 1
		preTime.value = formatDate(tc, 'YYYY-MM-DD')
	}
	const dayList = ref([1, 2, 3, 4, 5, 6, 7])
	const shareRef = ref(null)
	const hasList = ref([])
	const startDate = ref('2000-01-01')
	const endDate = ref(formatDate(new Date(), 'YYYY-MM-DD'))
	const monthList=ref([])
	const weekShow=ref(false)
	onLoad((o) => {
		childrenId = o.childId
		getMonthList(newTime.value)
		updateList()
		getUp()
	})
	onShow(() => {

	})
	onReady(() => {
		uni.getSystemInfo({
			success: (e) => {
				statusHeight.value = e.statusBarHeight * 2
				bottoms.value = e.safeAreaInsets.bottom*2
			},
		})
	})
	async function toDel(row,index){
		const res=await deleteGrowthRecord({
			grow_log_id:row.id,
			children_id:childrenId
		})
		if(res.code==10000){
			historyList.value.splice(index,1)
		}
		showToast(res.message)
	}
	async function updateList(){
		historyList.value=[]
		getList()
	}
	async function getList(){
    console.log(dateTime.value)
		const res=await getBabyGrowthRecordsByDate({
			date:dateTime.value,
			children_id:childrenId
		})
		let list=res?.data.list||[];
		for(var i in list){
			list[i].del=false
		}
		historyList.value=list
		babyMonth.value=res.data.age.date
	}
	async function getMonthList(time){
		const res=await getMonthlyRecordStatus({
			children_id:childrenId,
			year:formatDate(new Date(time), 'YYYY'),
			month:formatDate(new Date(time), 'M')
		})
		monthList.value=res.data.days_status
		birthDay.value=res.data.birthday
		const list=res.data.days_status;
		let arr=[]
		for(var i in list){
			if(list[i]){
				arr.push({
					date:i
				})
			}
		}
		hasList.value=arr
		getWeekList(newTime.value)
	}
	function getDay(time){
		return weekShow.value?formatDate(new Date(time), 'DD'):''
	}
	function editTime(time){
		return formatDate(new Date(time), 'YYYY年MM月DD日')
	}
	function openRl() {
		timeShow.value = !timeShow.value
		getMonthList(dateTime.value)
	}
	function getWeekList(time) {
		let date = new Date(time)
		let Time = date.getTime()
		let day = date.getDay()
		let oneDayTime = 24 * 60 * 60 * 1000
		let a = Time - (day) * oneDayTime
		let b = Time - (day - 1) * oneDayTime
		let c = Time - (day - 2) * oneDayTime
		let d = Time - (day - 3) * oneDayTime
		let e = Time - (day - 4) * oneDayTime
		let f = Time - (day - 5) * oneDayTime
		let g = Time - (day - 6) * oneDayTime
		let aa = formatDate(new Date(a), 'YYYY-MM-DD')
		let bb = formatDate(new Date(b), 'YYYY-MM-DD')
		let cc = formatDate(new Date(c), 'YYYY-MM-DD')
		let dd = formatDate(new Date(d), 'YYYY-MM-DD')
		let ee = formatDate(new Date(e), 'YYYY-MM-DD')
		let ff = formatDate(new Date(f), 'YYYY-MM-DD')
		let gg = formatDate(new Date(g), 'YYYY-MM-DD')
		var week = [aa, bb, cc, dd, ee, ff, gg]
		weekList.value[0].value = aa
		weekList.value[1].value = bb
		weekList.value[2].value = cc
		weekList.value[3].value = dd
		weekList.value[4].value = ee
		weekList.value[5].value = ff
		weekList.value[6].value = gg
		let a1 = Time - (day - 7) * oneDayTime
		let b1 = Time - (day - 8) * oneDayTime
		let c1 = Time - (day - 9) * oneDayTime
		let d1 = Time - (day - 10) * oneDayTime
		let e1 = Time - (day - 11) * oneDayTime
		let f1 = Time - (day - 12) * oneDayTime
		let g1 = Time - (day - 13) * oneDayTime
		let aa1 = formatDate(new Date(a1), 'YYYY-MM-DD')
		let bb1 = formatDate(new Date(b1), 'YYYY-MM-DD')
		let cc1 = formatDate(new Date(c1), 'YYYY-MM-DD')
		let dd1 = formatDate(new Date(d1), 'YYYY-MM-DD')
		let ee1 = formatDate(new Date(e1), 'YYYY-MM-DD')
		let ff1 = formatDate(new Date(f1), 'YYYY-MM-DD')
		let gg1 = formatDate(new Date(g1), 'YYYY-MM-DD')
		var week1 = [aa1, bb1, cc1, dd1, ee1, ff1, gg1]
		weekListHou.value[0].value = aa1
		weekListHou.value[1].value = bb1
		weekListHou.value[2].value = cc1
		weekListHou.value[3].value = dd1
		weekListHou.value[4].value = ee1
		weekListHou.value[5].value = ff1
		weekListHou.value[6].value = gg1
		let a2 = Time - (day+1) * oneDayTime
		let b2 = Time - (day+2) * oneDayTime
		let c2 = Time - (day+3) * oneDayTime
		let d2 = Time - (day+4) * oneDayTime
		let e2 = Time - (day+5) * oneDayTime
		let f2 = Time - (day+6) * oneDayTime
		let g2 = Time - (day+7) * oneDayTime
		let aa2 = formatDate(new Date(a2), 'YYYY-MM-DD')
		let bb2 = formatDate(new Date(b2), 'YYYY-MM-DD')
		let cc2 = formatDate(new Date(c2), 'YYYY-MM-DD')
		let dd2 = formatDate(new Date(d2), 'YYYY-MM-DD')
		let ee2 = formatDate(new Date(e2), 'YYYY-MM-DD')
		let ff2 = formatDate(new Date(f2), 'YYYY-MM-DD')
		let gg2 = formatDate(new Date(g2), 'YYYY-MM-DD')
		var week2 = [aa2, bb2, cc2, dd2, ee2, ff2, gg2]
		weekListQian.value[6].value = aa2
		weekListQian.value[5].value = bb2
		weekListQian.value[4].value = cc2
		weekListQian.value[3].value = dd2
		weekListQian.value[2].value = ee2
		weekListQian.value[1].value = ff2
		weekListQian.value[0].value = gg2
		const list=hasList.value;
		const lista=weekList.value;
		const listb=weekListQian.value;
		const listc=weekListHou.value;
		for(var i in lista){
			lista[i].has=false
		}
		for(var i in listb){
			listb[i].has=false
		}
		for(var i in listc){
			listc[i].has=false
		}
		for(var i in list){
			for(var j in lista){
				if(list[i].date==lista[j].value){
					lista[j].has=true
				}
			}
			for(var j in listb){
				if(list[i].date==listb[j].value){
					listb[j].has=true
				}
			}
			for(var j in listc){
				if(list[i].date==listc[j].value){
					listc[j].has=true
				}
			}
		}
		weekList.value=lista
		weekShow.value=true
		weekListQian.value=listb
		weekListHou.value=listc
	}

	function compareDates(date1, date2) {
		var time1 = new Date(date1).getTime()
		var time2 = new Date(date2).getTime()

		if(time1 > time2) {
			return 1
		} else if(time1 < time2) {
			return -1
		} else {
			return 0
		}
	}

	function checkWeek(row, index) {
		var time = weekList.value[index].value
		var a = compareDates(time, startDate.value)
		var b = compareDates(time, endDate.value)
		if(a >= 0 && b <= 0) {
			dateTime.value = weekList.value[index].value
			updateList()
		}
	}

	var startX = 0

	function touchStart(e) {
		if(e.touches.length == 1) {
			//设置触摸起始点水平方向位置
			startX = e.touches[0].clientX
		}
	}

	function touchEndTab(e) {
		var index = e.currentTarget.id
		if(e.changedTouches.length == 1) {
			//手指移动结束后水平位置
			var endX = e.changedTouches[0].clientX
			let diff = endX - startX
			if(Math.abs(diff) > 40) {
				if(diff > 0) {
					console.log('右滑...')
					historyList.value[index].del = false
				} else {
					console.log('左滑...')
					historyList.value[index].del = true
				}
			}
		}
	}
	function handleMove(e) {
		var left = e?.changedTouches[0].clientX
		calenderMove.value.x = left - startX
	}

	function touchEndWeek(e) {
		if(e.changedTouches.length == 1) {
			//手指移动结束后水平位置
			var endX = e.changedTouches[0].clientX
			let diff = endX - startX
			if(Math.abs(diff) > 40) {
				if(diff > 0) {
					console.log('右滑..11.')
					jiaDate(-7)
				} else {
					console.log('左滑..22.')
					jiaDate(7)
				}
			}
		}
		calenderMove.value.x = 0
	}

	function jiaDate(num) {
	  var tt = new Date(weekTime.value)
	  var ti = tt.getTime() + 1000 * 60 * 60 * 24 * num
	  var time = formatDate(ti, 'YYYY-MM-DD')
	  weekTime.value = time
	  getWeekList(weekTime.value)
	}
	function changeDay(e) {
		dateTime.value = e.fulldate
		weekTime.value = e.fulldate
		getWeekList(dateTime.value)
		timeShow.value = false
		updateList()
	}

	function backToday() {
		timeShow.value = false
		dateTime.value = newTime.value
		weekTime.value = newTime.value
		getWeekList(dateTime.value)
		updateList()
	}
	function changeMonth(e) {
		console.log(e)
		let time=e.year+'-'+e.month+'-01'
		getMonthList(time)
	}
</script>

<style lang="scss">
	page {
		background: #f6f6f6;
	}
</style>
<style lang="scss" scoped>
	.pages{
		height: 100vh;
		display: flex; flex-direction: column;
	}
	.flex {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}
	.topCen {
		height: 56rpx;
		background: linear-gradient(90deg, #cb9fff 0%, #a28aff 100%);
		border-radius: 28rpx;
		margin: 12rpx auto;
		padding: 0 30rpx;
		line-height: 56rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 600;
		font-size: 36rpx;
		color: #ffffff;
		.topCen_img {
			width: 20rpx;
			height: 20rpx;
			margin-left: 16rpx;
			position: relative;
			top: -4rpx;
		}
	}

	.head_img {
		width: 42rpx;
		height: 42rpx;
		margin-right: 23rpx;
		image {
			width: 42rpx;
			height: 42rpx;
		}
	}

	.head_img1 {
		width: 42rpx;
		height: 42rpx;
		image {
			width: 42rpx;
			height: 42rpx;
		}
	}

	.add_box {
		.topCena {
			width: 100%;
			height: 100%;
			z-index: 1;
			padding: 10rpx 0;
			box-sizing: border-box;
			.head_data {
				width: 100%;
				height: 64rpx;
				font-size: 36rpx;
				font-family: PingFang-SC-Heavy, PingFang-SC;
				font-weight: 800;
				color: #333333;
				line-height: 64rpx;
				text-align: center;
				.head_data_img {
					width: 18rpx;
					height: 12rpx;
					margin-left: 10rpx;
					position: relative;
					top: -6rpx;
				}
			}
		}
	}

	.date_box {
		position: fixed;
		left: 0;
		background: rgba(0, 0, 0, 0.5);
		width: 100%;
		height: 100vh;
		z-index: 1111;
		.date_box_con {
			background: #ffffff;
			padding-bottom: 30rpx;
			border-radius: 0 0 20rpx 20rpx;
		}
	}
	.header{
		background: #FFF;
		.head_time{
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 28rpx;
			color: #333333;
			line-height: 40rpx;
			text-align: center;
			font-style: normal;
			text-transform: none;
			padding: 20rpx 0;
			.head_time_img{
				width:28rpx;
				height:28rpx;
				margin: 0 10rpx;
				position: relative;
				top: 4rpx;
			}
		}
	}
	.sec_head {
		box-sizing: border-box;
		padding: 0 30rpx;
		background: #fff;
		width: 100%;
		overflow: hidden;
		z-index: 10;
		position: sticky;
		left: 0;
		.sec_head_l {
			width: 78rpx;
			height: 78rpx;
			border-radius: 50%;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 28rpx;
			line-height: 78rpx;
			text-align: center;
			position: relative;
			.sec_head_l_dian{
				position: absolute;
				bottom: 4rpx;
				left: 32rpx;
				width: 14rpx;
				height: 14rpx;
				background: #6EDABB;
				border-radius:50%;
			}
		}
		.sec_head_box {
			width: 300%;
			height: 78rpx;
			overflow: hidden;
			margin-left: -690rpx;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
		}
	}
	.section{
		flex: 1;
		background: #FFF;
		margin-top: 20rpx;
		.sec_none{
			width: 100%;
			height: 100%;
			text-align: center;
			display: flex;
			flex-direction: row;
			/* 子元素横向排列 */
			justify-content: center;
			/* 相对父元素水平居中 */
			align-items: center;
			.sec_none_img{
				width: 212rpx;
				height: 193rpx;
			}
			.sec_none_text{
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 30rpx;
				color: #ABABAB;
				line-height: 35rpx;
				text-align: center;
				font-style: normal;
				text-transform: none;
				margin-top: 30rpx;
			}
		}
		.sec_box{
			padding: 0 24rpx;
			height: 100%;
			overflow-y: scroll;
			overflow-x: hidden;
			.sec_list{
				padding-top: 20rpx;
				.sec_list_l{
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 28rpx;
					color: #666666;
					line-height: 100rpx;
				}
				.sec_list_r{
					width: 596rpx;
					height: 100rpx;
					background: linear-gradient( 330deg, #64DCCB 0%, #6ACCB7 100%);
					border-radius:16rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 28rpx;
					color: #FFFFFF;
					line-height: 100rpx;
					box-sizing: border-box;
					padding: 0 20rpx;
					display: flex;
					flex-wrap: wrap;
					justify-content: space-between;
					.sec_list_r_r{
						display: flex;
						flex-wrap: wrap;
						justify-content: space-between;
						view{
							width: 120rpx;
							height: 100rpx;
							background: #DE272A;
							border-radius: 0rpx 16rpx 16rpx 0rpx;
							text-align: center;
							line-height: 100rpx;
							color: #FFF;
							margin-right: -20rpx;
							margin-left: 20rpx;
						}
					}
				}
			}
		}
	}
</style>
